<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
        h4 {
            margin: 0;
            background-color: #ccc;
        }
    </style>
    <script>
        class drag{
            constructor(selector,titleSelector){
                this.box = document.querySelector(selector);
                this.title = titleSelector ? box.querySelector(titleSelector) : box;
                this.bindEvents();
            }
            bindEvents(){
                this.title.onmousedown = e => {
                    let disX = e.offsetX,
                        disY = e.offsetY;
                    document.onmousemove = e => {
                        let left = e.clientX - disX,
                        top = e.clientY - disY;
                        this.move(left,top);
                    }
                    document.onmouseup = function(){
                        document.onmousemove = null;
                    }
                    return false;
                }
                
                
            }
            move(left,top){
                this.box.style.left = left + 'px';
                this.box.style.top = top + 'px';
            }
        }
        window.onload = function(){
            new drag("#box","h4")
        }
    </script>
</head>
<body>
    <div id="box">
        <h4>title</h4>
    </div>
</body>
</html>